<template>
  <div class="form-content">
    <!-- 表格查询 -->
    <div class="table-search">
      <el-form :inline="true" ref="form" :rules="rules" :model="formInline" class="demo-form-inline">
        <el-form-item prop="imei">
          <el-input v-model="formInline.imei" clearable placeholder="请输入imei" @clear="clearChange"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="success" icon="el-icon-plus" @click="addUser">新增</el-button>
        </el-form-item> -->
      </el-form>
    </div>

    <div class="form-main">
      <!-- 表头标题 -->
      <div class="tb_title">返库设备</div>
      <!-- 表格 -->
      <div class="listfile">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          :height="tableHeight"
          :data="tableData">
          <el-table-column prop="imei" label="IMEI" width="140"></el-table-column>
          <el-table-column prop="deviceName" label="设备名称" width="140" ></el-table-column>
          <!-- <el-table-column prop="deviceCode" label="设备编码" ></el-table-column> -->
          <el-table-column prop="statusinfo" label="设备状态" width="90" ></el-table-column>
          <!-- <el-table-column prop="projectName" label="所属项目" width="200"></el-table-column> -->
          <!-- <el-table-column prop="projectType" label="项目类型" width="100"></el-table-column> -->
          <el-table-column prop="createTime" label="入库时间" width="120"></el-table-column>
          <!-- <el-table-column prop="saleTime" label="销售时间"></el-table-column> -->
          <!-- <el-table-column prop="userName" label="用户"></el-table-column>   -->
          <!-- <el-table-column prop="deviceRemark" label="设备备注"></el-table-column> -->
          <!-- <el-table-column prop="versionRemark" label="版本备注"></el-table-column> -->
          <el-table-column prop="remark" label="备注" show-overflow-tooltip ></el-table-column>

          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
              <!-- <el-button @click="handleClick(scope.row)" icon="el-icon-star-off" type="warning" size="mini">查看</el-button> -->
              <el-button
                size="mini" type="primary"
                @click="handleBack(scope.$index, scope.row)">入库</el-button>
              <!-- <el-button
                size="mini"
                type="danger" icon="el-icon-delete"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 分页 -->
    <div class="table_page">
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
        ></el-pagination>
      </div>

    </div>

    <!-- 子组件 -->
    <storeDeviceModal ref="storeDevice" @submit="submitAddChange" :historyData='addEdit_data' />
  </div>
</template>

<script>
import storeDeviceModal from "./store-device-modal.vue"
import { loadDevice, enterStore, searchByImei } from '@/api/device'
  export default {
    components: {storeDeviceModal},
    data() {
      const validImei = (rule, value, callback)=> {
        console.log(rule,value)
          if(value && value.trim().length > 4) {
            callback()
          } else {
            callback(new Error('IMEI不能少于5位'))
          }
      }
      return {
        tableHeight: 'calc(100vh - 296px)',
        totalCount: 0, //总条数，总共有多少条数据
        currentPage: 1, // 当前页
        pageSize: 10, // 每页显示多少条
        addEdit_data: {},
        loading: true,
        tableData: [ ],
        formInline: {
          imei: ''
        },
        rules: {
          imei: [ {validator: validImei, trigger: 'blur'}]
        }
      }
    },
    methods: {
      // 新增--保存后，子传给父组件
      submitAddChange (data) {

      },
      //添加
      addUser(){
        this.$refs.storeDevice.modal1 = true;
        this.$refs.storeDevice.title_name = '新增库存设备';
        // this.$refs.storeDevice.searchCityData();// 父调子组件的方法
      },
      search() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.currentPage = 1
            this.loadData()
          }
        })
      },
      clearChange(){
        // this.currentPage = 1
        // this.loadData()
      },
      //编辑
      handleBack(index, row) {
        enterStore({ imei: row.imei, deviceStatus: 0}).then(res => {
          if(res.statusCode == '200'){
            this.$message.success('返库成功！')
            this.loadData()
          } else {
              this.$message.error(res.statusMsg)
          }

      }).catch()
      },
      // 分页
      handleCurrentChange(newPage) {
        this.currentPage = newPage
        this.loadData()
      },
      //每页
      handleSizeChange(val) {
        this.pageSize = val
        this.loadData()
      },
      loadData(){
       if(this.formInline.imei){
          let imei = this.formInline.imei.substr(this.formInline.imei.length -5, 5)
          searchByImei({
            imei: imei,
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            deviceStatus: 3,
          }).then(res => {
            this.tableData = res.data.content;
            this.totalCount = res.data.total;
          }).catch()

        } else {
          loadDevice({ deviceStatus: 3, pageNum: this.currentPage, pageSize: this.pageSize}).then(res => {
            this.tableData = res.data.content;
            this.totalCount = res.data.total;
          }).catch()

        }
      }

    },
    created(){
      this.loadData()
    },
    mounted(){
      this.loading = false;
    },
    destroyed() {
      this.$destroy();
      this.historyData = [];
      this.page_Data = [];
    },
    watch: {
      formInline: {
        handler: function(val){
          if(val.imei) {

          } else {
            this.currentPage = 1
            this.loadData()
          }
        },
        deep: true
      }
    }
  }
</script>
